<template>
  <div>
    <el-drawer
      title="分配权限"
      :visible.sync="distributionShow"
      :with-header="false"
      :wrapper-closable="false"
      size="800px"
      style="border-top-left-radius: 10px"
    >
      <div class="cp-title">
        <span>分配权限</span>
        <i class="el-icon-close" @click="closePopup"></i>
      </div>
      <!-- 表单 -->
      <div class="cp-formDiv">
        <el-form ref="form" :model="form" label-width="80px" class="cp-form">
          <!-- 第一个 -->
          <el-collapse v-model="activeNames">
            <el-collapse-item
              v-for="(item, index) in list"
              :key="item.authNo"
              :title="item.authName"
              :name="index"
            >
              <template slot="title">
                <div class="cp-el-title">
                  <el-switch
                    v-model="item.checked"
                    :disabled="isSee"
                    @click.stop.native
                    @change="oneCheckFun(item)"
                  ></el-switch>
                  <span class="cp-el-titleText">{{ item.authName }}</span>
                </div>
              </template>
              <div v-for="twoItem in item.childZTrees" :key="twoItem.authNo" class="cp-elContaint">
                <div class="cp-el-title2">
                  <el-switch
                    v-model="twoItem.checked"
                    :disabled="isSee"
                    @change="twoCheckFun(twoItem, item)"
                  ></el-switch>
                  <span class="cp-el-titleText">{{ twoItem.authName }}</span>
                </div>
                <div style="padding-left: 40px;">
                  <el-checkbox
                    v-for="threeItem in twoItem.childZTrees"
                    :key="threeItem.authNo"
                    v-model="threeItem.checked"
                    :disabled="isSee"
                    :label="threeItem.authName"
                    @change="threeCheckFun(threeItem, twoItem, item)"
                  ></el-checkbox>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div v-if="!isSee" class="cp-btn">
            <span @click="closePopup">取消</span>
            <span @click="saveFun">保存</span>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { rolesTree, rolesAllotAuth } from '@/api/administrator';
  import { getCheckedIds } from '@/utils/treeUtil';
  export default {
    data() {
      return {
        form: {},
        rowId: null,
        isSee: false,
        activeNames: [0, 1, 2, 3, 4],
        list: [], //权限树
        distributionShow: false,
      };
    },
    activated() {},
    mounted() {},
    methods: {
      init(id, isSee) {
        this.isSee = isSee;
        this.rowId = id;
        this.distributionShow = true;
        this.rolesTreeFun();
      },
      // 获取权限树
      rolesTreeFun() {
        const param = { id: this.rowId, deleted: 0, authGroup: 417 };
        rolesTree(param).then(res => {
          const { data = [] } = res;
          this.list = data.length > 0 ? data[0].childZTrees : [];
        });
      },

      // 关闭弹框
      closePopup() {
        this.distributionShow = false;
      },

      // 分配权限
      rolesAllotAuthFun() {
        rolesAllotAuth().then(res => {
          console.log(res);
        });
      },

      // 一级点击
      oneCheckFun(currItem) {
        this.list = this.list.reduce((col, item) => {
          if (item.authNo === currItem.authNo) {
            if (item.childZTrees && Array.isArray(item.childZTrees)) {
              item.childZTrees.forEach(childItem => {
                if (currItem.checked) {
                  childItem.checked = true;
                } else {
                  childItem.checked = false;
                  if (childItem.childZTrees && Array.isArray(childItem.childZTrees)) {
                    childItem.childZTrees.forEach(_item => {
                      _item.checked = false;
                    });
                  }
                }
              });
            }
          }
          col.push(item);
          return col;
        }, []);
      },

      // 二级点击
      twoCheckFun(currItem, topItem) {
        this.list = this.list.reduce((col, item) => {
          if (item.authNo === topItem.authNo) {
            if (item.childZTrees && Array.isArray(item.childZTrees)) {
              const childs = item.childZTrees;
              const childChecks = childs.filter(_item => _item.checked);
              childs.forEach(childItem => {
                if (currItem.authNo === childItem.authNo) {
                  if (currItem.checked) {
                    topItem.checked = true;
                  } else {
                    topItem.checked = childChecks.length < 1 ? false : true;
                    if (childItem.childZTrees && Array.isArray(childItem.childZTrees)) {
                      childItem.childZTrees.forEach(_item => {
                        _item.checked = false;
                      });
                    }
                  }
                }
              });
            }
          }
          col.push(item);
          return col;
        }, []);
      },
      // 复选框
      threeCheckFun(currItem, twoItem, topItem) {
        this.list = this.list.reduce((col, item) => {
          if (item.authNo === topItem.authNo) {
            if (item.childZTrees && Array.isArray(item.childZTrees)) {
              const twoChilds = item.childZTrees;
              twoChilds.forEach(_twoItem => {
                if (twoItem.authNo === _twoItem.authNo) {
                  if (twoItem.childZTrees && Array.isArray(twoItem.childZTrees)) {
                    const threeChilds = twoItem.childZTrees;
                    const threeChildsChecks = threeChilds.filter(_item => _item.checked);
                    threeChilds.forEach(_threeItem => {
                      if (currItem.authNo === _threeItem.authNo) {
                        if (currItem.checked) {
                          twoItem.checked = true;
                          topItem.checked = true;
                        } else {
                          twoItem.checked = threeChildsChecks.length < 1 ? false : true;
                          topItem.checked =
                            twoChilds.filter(_item => _item.checked).length < 1 ? false : true;
                        }
                      }
                    });
                  }
                }
              });
            }
          }
          col.push(item);
          return col;
        }, []);
      },

      // 处理数据
      disposeData() {
        let that = this;
        let list = this.list;
        for (var i = 0; i < list.length; i++) {
          if (list[i].checked == true) {
            that.checkList.push(list[i].authNo);
          }
          let list2 = list[i].childZTrees;
          for (var j = 0; j < list2.length; j++) {
            if (list2[j].checked == true) {
              that.checkList.push(list2[j].authNo);
              let list3 = list2[j].childZTrees;
              for (var a = 0; a < list3.length; a++) {
                if (list3[a].checked == true) {
                  that.checkList.push(list3[a].authNo);
                }
              }
            }
          }
        }
        that.checkList.unshift('WALFARE-ENTER');
      },

      // 保存
      saveFun() {
        const ids = getCheckedIds(this.list, { id: 'authNo', children: 'childZTrees' });
        ids.unshift('WALFARE-ENTER');
        const param = { id: this.rowId, roleAuth: ids.join(',') };
        rolesAllotAuth(param).then(res => {
          if (res.status == 200) {
            this.$message.success('保存成功！');
            this.distributionShow = false;
            this.$emit('refresh');
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  .cp-title {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    color: #34363b;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      font-weight: 800;
    }
  }
  .cp-formDiv {
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .cp-form {
    padding: 25px;
    .el-collapse {
      border: none;
    }
    .co-collapseItem {
    }
    .el-collapse-item__header {
      background: #f7f6f9;
    }
    .cp-elLine {
      background: #f7f6f9;
      padding: 12px 15px 12px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cp-el-title {
      margin-left: 14px;
      .cp-el-titleText {
        margin-left: 14px;
        color: #6d6e6e;
        font-size: 14px;
      }
    }
    .cp-elContaint {
      .cp-el-title2 {
        padding: 15px 0;
        span {
          margin-left: 14px;
          color: #6d6e6e;
          font-size: 14px;
        }
      }
      .cp-checkbox {
        margin-left: 65px;
      }
    }
  }
  .cp-btn {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 20px;
    justify-content: flex-end;
    span {
      width: 72px;
      cursor: pointer;
      height: 33px;
      line-height: 33px;
      display: block;
      border-radius: 4px;
    }
    span:nth-child(1) {
      border: 1px solid #e8e4e8;
    }
    span:nth-child(2) {
      background: #3771e9;
      color: #ffff;
      margin-left: 15px;
    }
  }
</style>
